<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<html>
	 <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="format-detection" content="telephone=no">
        <meta charset="UTF-8">
        <meta name="description" content="Violate Responsive Admin Template">
        <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">
        <script src="<%=path %>/assets2/js/validation/validate.min.js"></script>
        <script src="<%=path %>/assets2/js/validation/validationEngine.min.js"></script>
        <script src="<%=path %>/assets2/js/validation/messages_zh.min.js"></script>
        <script src="<%=path %>/assets2/js/jquery.form.js"></script>
    </head>
	<form role="form" class="form-validation" id="fm" action="<%=path %>/supplier/updateSupplierGoods" method="post" enctype="multipart/form-data">
	<input type="hidden" name="supplierGoodsId" id="supplierGoodsId" value="${param.supplierGoodsId }">
		<div class="row">
			<div class="col-md-4 form-group">
				<label>商品名称</label> <input type="text"
					class="input-sm validate[required] form-control" name="supplierGoodsName" id="supplierGoodsName" readonly="readonly">
			</div>
			<div class="col-md-4 form-group">
				<label>商品类别</label>
				<select name="classifyId1" id="classifyId1"
					class="form-control input-sm validate[required]">
					<option value="">请选择</option>
				</select>
			</div>
			<div class="col-md-4 form-group">
				<label>商品价格</label> <input type="text"
					class="input-sm validate[required] form-control" name="supplierGoodsPrice" id="supplierGoodsPrice">
			</div>
		</div>
		<div class="clearfix"></div>
		<div class="row">
			<div class="col-md-4 form-group">
				<label>商品总量</label> <input type="text"
					class="input-sm validate[required] form-control" name="supplierGoodsStock" id="supplierGoodsStock">
			</div>
			<div class="col-md-4 form-group">
				<label>商品重量</label> <input type="text"
					class="input-sm form-control" name="supplierGoodsWeight" id="supplierGoodsWeight">
			</div>
		</div>
		<div class="clearfix"></div>
		<div class="row">
			<div class="col-md-12 form-group">
				<label>商品规格（多个规格请用英文逗号`,`隔开）</label> <input type="text"
					class="input-sm form-control" name="supplierGoodsSize" id="supplierGoodsSize">
			</div>
		</div>
		<div class="clearfix"></div>
		<div class="form-group m-b-15">
			<label>商品主图</label>
			<div class="row" id="goodsMainPhotoDiv">
				<input type="text" name="goodsMainText" id="goodsMainText" style="display: none;">
				<input type="file" name="goodsMainPhoto" id="goodsMainPhoto" style="display: none;">
				<div class="col-xs-3 col-md-2" id="addGoodsMainPhotoDiv"><img class="img-thumbnail" src="<%=path %>/assets2/img/tianjia.png" onclick="addGoodsMainPhoto()"></div>
			</div>
		</div>
		<div class="clearfix"></div>
		<div class="form-group m-b-15">
			<label>商品图片</label>
			<div class="row" id="photoDiv">
				<input type="text" class="goodsText" name="goodsText" id="goodsText1" style="display: none;">
				<input type="text" class="goodsText" name="goodsText" id="goodsText2" style="display: none;">
				<input type="text" class="goodsText" name="goodsText" id="goodsText3" style="display: none;">
				<input type="text" class="goodsText" name="goodsText" id="goodsText4" style="display: none;">
				<input type="text" class="goodsText" name="goodsText" id="goodsText5" style="display: none;">
				<input type="text" class="goodsText" name="goodsText" id="goodsText6" style="display: none;">
				
				<input type="file" class="goodsPhoto" name="goodsPhoto" id="goodsPhoto1" style="display: none;">
				<input type="file" class="goodsPhoto" name="goodsPhoto" id="goodsPhoto2" style="display: none;">
				<input type="file" class="goodsPhoto" name="goodsPhoto" id="goodsPhoto3" style="display: none;">
				<input type="file" class="goodsPhoto" name="goodsPhoto" id="goodsPhoto4" style="display: none;">
				<input type="file" class="goodsPhoto" name="goodsPhoto" id="goodsPhoto5" style="display: none;">
				<input type="file" class="goodsPhoto" name="goodsPhoto" id="goodsPhoto6" style="display: none;">
				<div class="col-xs-3 col-md-2"><img class="img-thumbnail" src="<%=path %>/assets2/img/tianjia.png" onclick="addGoodsPhoto()"></div>
			</div>
		</div>
		<div class="clearfix"></div>
		<div class="form-group m-b-15">
			<label>商品描述</label>
			<textarea class="input-sm form-control validate[maxSize[255]]" name="supplierGoodsIntro" id="supplierGoodsIntro"></textarea>
		</div> 
		<button class="btn btn-sm btn-primary" type="button" onclick="sub()" id="subBtn">提交</button>
	</form>

	<script type="text/javascript">
		(function(){
			if($("[class*='form-validation']")[0]) {
			    $("[class*='form-validation']").validationEngine();
			    $('body').on('click', '.validation-clear', function(e){
				e.preventDefault();
				$(this).closest('form').validationEngine('hide');
			    });
			}
		})();
		$(function(){
			$.ajax({
				 type:"POST",
		         url: "<%=path %>/supplier/getGoodsClassifyList",
		         success: function(data,status,xhr){
		        	 for(var i=0;i<data.length;i++){
		        		 $("#classifyId1").append("<option value='"+data[i].cassifyId+"'>"+data[i].cassifyName+"</option>");
		        	 }
		        	 
		        	 $.ajax({
						 type:"POST",
				         url: "<%=path %>/supplier/getSupplierGoodsInfo?supplierGoodsId=${param.supplierGoodsId}",
				         success: function(data,status,xhr){
				        	$('#supplierGoodsName').val(data.supplierGoodsName);
				        	$('#classifyId1').val(data.classifyId1);
				        	$('#supplierGoodsPrice').val(data.supplierGoodsPrice);
				        	$('#supplierGoodsStock').val(data.supplierGoodsStock);
				        	$('#supplierGoodsWeight').val(data.supplierGoogsWeight);
				        	$('#supplierGoodsSize').val(data.supplierGoodsSize);
				        	$('#goodsMainText').val(data.supplierGoodsThums);
				        	$('#goodsMainPhotoDiv').append('<div class="col-xs-3 col-md-2" id="addGoodsMainPhotoDiv"><img class="img-responsive" src="<%=path %>/supplier/getApplyPhoto?photoUrl='+data.supplierGoodsThums+'" style="position:relative">'
									+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delTextMainPhoto()" style="width: 20px;height: 20px;cursor: pointer;position:absolute;right:10px;top:5px"'
									+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)"></div>');
							$('#addGoodsMainPhotoDiv').remove();
							var goodsImages=data.supplierGoodsImage.split(',');
							for(var i=0;i<goodsImages.length;i++){
								if(goodsImages[i]!=null&&goodsImages[i]!=''){
									var textFileId ='goodsText'+(i+1);
									$('#'+textFileId).val(goodsImages[i]);
									$('#photoDiv').append('<div class="col-xs-3 col-md-2" id="'+textFileId+'Div"><img class="img-responsive" src="<%=path %>/supplier/getApplyPhoto?photoUrl='+goodsImages[i]+'" style="position:relative">'
											+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delTextPhoto('+textFileId+')" style="width: 20px;height: 20px;cursor: pointer;position:absolute;right:10px;top:5px"'
											+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)"></div>');
								}
							}
				        	$('#supplierGoodsIntro').val(data.supplierGoodsIntro);
				         }
					})
		         }
			})
			$('#goodsMainPhoto').on('change',function(){
				var fileName=this.value;
				while (fileName.indexOf("\\") != -1)
				{
			    fileName = fileName.slice(fileName.indexOf("\\") + 1);
				}
			    var ext = fileName.slice(fileName.indexOf(".")).toLowerCase();
			    if(ext.indexOf("png") == -1 && ext.indexOf("jpg") == -1)
			    {
			    	swal({ 
						title: "操作失败", 
						text: "商品图片格式仅支持PNG、JPG", 
						type: "error",
					});
			    	return false;
			    }
				var objUrl = getObjectURL(this.files[0]);
				$('#goodsMainPhotoDiv').append('<div class="col-xs-3 col-md-2" id="addGoodsMainPhotoDiv"><img class="img-responsive" src="'+objUrl+'" style="position:relative">'
						+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delMainPhoto()" style="width: 20px;height: 20px;cursor: pointer;position:absolute;right:10px;top:5px"'
						+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)"></div>');
				$('#addGoodsMainPhotoDiv').remove();
			})
			
			$('.goodsPhoto').on('change',function(){
				var fileName=this.value;
				while (fileName.indexOf("\\") != -1)
				{
			    fileName = fileName.slice(fileName.indexOf("\\") + 1);
				}
			    var ext = fileName.slice(fileName.indexOf(".")).toLowerCase();
			    if(ext.indexOf("png") == -1 && ext.indexOf("jpg") == -1)
			    {
			    	swal({ 
						title: "操作失败", 
						text: "商品图片格式仅支持PNG、JPG", 
						type: "error",
					});
			    	return false;
			    }
				var objUrl = getObjectURL(this.files[0]);
				var photoDivId=this.id+"Div";
				$('#photoDiv').append('<div class="col-xs-3 col-md-2" id="'+photoDivId+'"><img class="img-responsive" src="'+objUrl+'" style="position:relative">'
						+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delPhoto('+this.id+')" style="width: 20px;height: 20px;cursor: pointer;position:absolute;right:10px;top:5px"'
						+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)"></div>');
			})
		})
		
		function sub(){
			if($("#fm").validationEngine("validate")){
				if($('#goodsMainPhoto').val()==null||$('#goodsMainPhoto').val()==''){
					if($('#goodsMainText').val()==null||$('#goodsMainText').val()==''){
						swal({ 
							  title: "操作失败", 
							  text: "商品主图不能为空", 
							  type: "error",
							});
						return false;
					}
				}
				$('#fm').ajaxSubmit({
					beforeSubmit:function(){
						layer.load(0, {shade: false}); 
					},success:function(data) { 
					layer.closeAll('loading');
					if(data.state==1){
						swal({ 
							  title: "操作成功", 
							  text: "商品修改成功", 
							  type: "success",
							},
							function(){
								$('#myModal').modal('toggle');
								$("#tabId").bootstrapTable('refresh');
							});
					}else if(data.state==2){
						swal({ 
							  title: "操作失败", 
							  text: "商品文字涉嫌非法文字，请修改后提交", 
							  type: "error",
							});
					}else{
						swal({ 
							  title: "操作失败", 
							  text: "商品修改失败", 
							  type: "error",
							});
					}
					},error:function(){
						layer.closeAll('loading');
						swal({ 
							  title: "操作失败", 
							  text: "网络出现了异常~", 
							  type: "error",
							});
		            }
			  })
			}
		}
		
		function addGoodsPhoto(){
			var i=0;
			$('.goodsText').each(function(){
			    if($(this).val()!=null && $(this).val()!=''){
			    	i++;
			    }
			});
			$('.goodsPhoto').each(function(){
				if($(this).val()!=null && $(this).val()!=''){
			    	i++;
			    }
			});
			if(i>=6){
				swal({ 
					  title: "操作失败", 
					  text: "商品图片不得大于6张图片", 
					  type: "error",
					});
			}else{
				$('.goodsPhoto').each(function(){
				    if($(this).val()==null||$(this).val()==''){
				    	$(this).click();
				    	$(this).attr("name","goodsPhoto");
				    	return false;
				    }
				  });
			}
			
		}
		
		function delPhoto(file){
			var fileId=file.id;
			$('#'+fileId).val('');
			$('#'+fileId+"Div").remove();
		}
		function delTextPhoto(text){
			var id=text.id;
			$('#'+id).val('');
			$('#'+id+"Div").remove();
		}
		function addGoodsMainPhoto(){
			$('#goodsMainPhoto').click();
		}
		
		function delMainPhoto(){
			$('#goodsMainPhoto').val('');
			$('#addGoodsMainPhotoDiv').remove();
			$('#goodsMainPhotoDiv').append('<div class="col-xs-3 col-md-2" id="addGoodsMainPhotoDiv"><img class="img-thumbnail" src="<%=path %>/assets2/img/tianjia.png" onclick="addGoodsMainPhoto()"></div>');
		}
		function delTextMainPhoto(){
			$('#goodsMainText').val('');
			$('#addGoodsMainPhotoDiv').remove();
			$('#goodsMainPhotoDiv').append('<div class="col-xs-3 col-md-2" id="addGoodsMainPhotoDiv"><img class="img-thumbnail" src="<%=path %>/assets2/img/tianjia.png" onclick="addGoodsMainPhoto()"></div>');
		}
		//建立一個可存取到該file的url  
		function getObjectURL(file) {  
		  var url = null ;   
		  // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
		  if (window.createObjectURL!=undefined) { // basic  
		    url = window.createObjectURL(file) ;  
		  } else if (window.URL!=undefined) { // mozilla(firefox)  
		    url = window.URL.createObjectURL(file) ;  
		  } else if (window.webkitURL!=undefined) { // webkit or chrome  
		    url = window.webkitURL.createObjectURL(file) ;  
		  }  
		  return url ;  
		}  
	</script>
</html>